<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- VERSION DE HTML5 -->
<!DOCTYPE html>
    
<html lang="es">
	<!-- CONFIGURACION DE LA PAGINA WEB ACTUAL -->
	<head>
		<!-- GENERAL's -->
		<title>Proyecto Sistema Entretenimiento</title>

		<!-- META's -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

		<!-- LINK's -->
		<link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
		<link type="text/css" rel="stylesheet" href="resources/css/styles-general.css">
	</head>

	<!-- CONTENIDO DE LA PAGINA WEB ACTUAL -->
	<body class="container">
		
		<!-- AGREGA LOS MODAL's COMUNES -->
		<jsp:include page="template/modals.jsp" />

		<!-- ENCABEZADO -->
		<jsp:include page="template/header.jsp"/>

		<!-- MENU DE NAVEGACION -->
		<jsp:include page="template/navigation.jsp"/>
		
		<!-- CUERPO DE PAGINA -->
		<section class="col-xs-12">			
			<form role="form" method="post" action="RespFamiliaGuardar_Servlet" class="form-horizontal">
				<input type="hidden" name="codigo" value="${codigo }">
				<fieldset>
					<legend>Información del Responsable de Familia
						<span class="error">
							<c:if test="${not empty error }">
								<c:out value="${error }"></c:out>
							</c:if>
						</span>
						<span class="success">
							<c:if test="${not empty success }">
								<c:out value="${success }"></c:out>
							</c:if>
						</span>
					</legend>
					<div class="col-xs-6">
						<div class="form-group">
			  				<label class="col-xs-4" for="nombre">Nombres :</label>
			  				<div class="col-xs-8">
			  					<input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ingrese su nombre" value="${nombre }">
			  				</div>
						</div>
						<div class="form-group">
			  				<label class="col-xs-4" for="apeMaterno">Ape. Materno :</label>
			  				<div class="col-xs-8">
			  					<input type="text" class="form-control" name="apeMaterno" id="apeMaterno" placeholder="Ingrese su apellido materno" value="${apeMaterno }">
			  				</div>
						</div>	
						<div class="form-group">
			  				<label class="col-xs-4" for="sexo">Sexo :</label>
			  				<div class="col-xs-8">			  				
				  				<div class="btn-group" data-toggle="buttons">
				  					<c:if test="${sexo == 'M' }">
				  						<c:set var="sexoM" value="active"/>
				  					</c:if>
				  					<c:if test="${sexo == 'F' }">
				  						<c:set var="sexoF" value="active"/>
				  					</c:if>
					                <label class="btn btn-default ${sexoM }">
					                    <input type="radio" name="sexo" value="M"> M
					                </label>
					                <label class="btn btn-default ${sexoF }">
					                    <input type="radio" name="sexo" value="F"> F
					                </label> 							               
	           					</div>
	           				</div>
						</div>
						<div class="form-group">
			  				<label class="col-xs-4" for="correo">Correo :</label>
			  				<div class="col-xs-8">
			  					<input type="email" class="form-control" name="correo" id="correo" placeholder="Ingrese su correo electronico" value="${correo }">
			  				</div>
						</div>					
					</div>
					<div class="col-xs-6">
						<div class="form-group">
			  				<label class="col-xs-4" for="apePaterno">Ape. Paterno :</label>
			  				<div class="col-xs-8">
			  					<input type="text" class="form-control" name="apePaterno" id="apePaterno" placeholder="Ingrese su apellido paterno" value="${apePaterno }">
			  				</div>
						</div>
						<div class="form-group">					
			  				<label class="col-xs-4" for="tipoDocumento">Tipo Documento :</label>
			  				<div class="col-xs-8">
			  					<div class="col-xs-6">
					  				<select class="form-control" id="tipoDocumento" name="tipoDocumento">
					  					<c:if test="${not empty listTipoDocumento }">
					  						<c:forEach items="${listTipoDocumento }" var="item" varStatus="index">
					  							<c:if test="${tipoDocumento eq item.idTipoDocumento }">
					  								<c:set var="tipDoc" value="selected"/>
					  							</c:if>
					  							<c:if test="${tipoDocumento ne item.idTipoDocumento }">
					  								<c:set var="tipDoc" value=""/>
					  							</c:if>
					  							<option value="${item.idTipoDocumento }" ${tipDoc }>${item.descripcion }</option>
					  						</c:forEach>
					  					</c:if>				  					
					  				</select>
				  				</div>
				  				<div class="col-xs-6">
				  					<input type="text" class="form-control" name="nroDocumento" id="nroDocumento" placeholder="Nro. documento" value="${nroDocumento }">
				  				</div>
				  			</div>
						</div>
						<div class="form-group">
			  				<label class="col-xs-4" for="celular">Celular :</label>
			  				<div class="col-xs-8">
			  					<input type="text" class="form-control" name="celular" id="celular" placeholder="Ingrese su nro. celular" value="${celular }">
			  				</div>
						</div>
						<div class="form-group">
			  				<label class="col-xs-4" for="direccion">Dirección :</label>
			  				<div class="col-xs-8">
			  					<input type="text" class="form-control" name="direccion" id="direccion" placeholder="Ingrese su dirección" value="${direccion }">
			  				</div>
						</div>
					</div>
					<div class="clearfix"></div>
					<button type="submit" class="btn btn-primary">Grabar Registro</button>
				</fieldset>
			</form>
		</section>

		<!-- SCRIPT's -->
		<script type="text/javascript" src="resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="resources/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="resources/js/scripts-general.js"></script>
	</body>
</html>